<template>
  <div class="InsurePage">
    <InsuredInfoList
      ref="insuredInfoListRef"
      :insuredInfoListTempData.sync="insuredInfoListTempData"
      @addInsuredInfo="addInsuredInfo"
      @deleteInsuredInfo="deleteInsuredInfo"
      @getPervPerson="getPervPerson"
    />
    <Footer />
    <div class="quickBtn" @click="submit">立即参保</div>
    <MaskPage></MaskPage>
  </div>
</template>

<script>
import InsuredInfoList from "@/components/InsuredInfoList";
import Footer from "@/components/Footer.vue";
import MaskPage from "@/components/mask/index.vue";
import { insuredItem } from "@/store/insuredItem.js";
import { Toast } from "vant";
export default {
  components: {
    InsuredInfoList,
    Footer,
    MaskPage
  },
  data() {
    return {
      insuredInfoListTempData: {},
    };
  },
  created() {
    this.insuredInfoListTempData = JSON.parse(
      JSON.stringify(this.$store.state.insuredInfos)
    );
  },
  methods: {
    addInsuredInfo() {
      this.insuredInfoListTempData.push(insuredItem());
    },
    deleteInsuredInfo() {},
    getPervPerson() {},
    async submit() {
      try {
        await this.$refs.insuredInfoListRef.validate();
        this.$store.dispatch("setInsuredInfos", this.insuredInfoListTempData);
      } catch (error) {
        Toast(error[0].message);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.InsurePage {
  margin-top: 20px;
  margin-bottom: 10px;
}
.quickBtn {
  text-align: center;
  margin-top: 20px;
}
</style>>

